<template>
  <div class="materials" v-if="props.movieMaterilas.length > 0">
    <header class="title">影片资料</header>
    <van-grid :column-num="2" direction="horizontal">
      <van-grid-item class="grid-item" v-for="(materilas, index) in filteredMovieMaterilas" :key="index">
        <template #icon>
          <van-icon :name="getIconStyle(materilas.title)" size="16" />
        </template>

        <template #text>
          <div class="text">
            <div class="title">{{ materilas.title }}</div>
            <div class="content">
              {{ materilas.content }}
            </div>
          </div>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  movieMaterilas: {
    type: Array,
  },
})


// 使用对象映射来简化图标选择逻辑
const iconMap = {
  '幕后花絮': 'video-o',
  '家长引导': 'smile-o',
  '电影原声': 'music-o',
  '拍摄地点': 'location-o',
  '出品发行': 'bag-o',
  '技术参数': 'setting-o'
}
// 定义一个方法来获取每个材料对应的图标
const getIconStyle = (title) => {
  return iconMap[title] || 'question-o' // 默认图标
};

// 计算属性来过滤掉“电影原声”
const filteredMovieMaterilas = computed(() => {
  return props.movieMaterilas.filter(material => material.title !== '电影原声')
})

</script>

<style scoped>
.materials {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 10px;
}

.materials header.title {
  font-size: 15px;
  color: #333;
  padding: 10px 0;
}

.grid-item {
  width: 25%;
}

:deep(.van-grid-item__content--center) {
  align-items: flex-start;
  /* justify-content: flex-start; */
}

.grid-item .text {
  margin-left: 5px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.grid-item .title {
  font-size: 15px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.grid-item .content {
  font-size: 13px;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
</style>
